<template>
	<div>
		<grid class="memberStatusTitle" :show-vertical-dividers="false">
			<grid-item @click.native="orderByFunc('name')">
				<span class="grid-center" style="margin-left: 10px;">姓名<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('employee')">
				<span class="grid-center" style="margin-left: 10px;">操作人<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('channel_tag')">
				<span class="grid-center" style="margin-left: 10px;">渠道<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('update_time')">
				<span class="grid-center" style="margin-left: 10px;">丢弃时间<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('obsolete_tag')">
				<span class="grid-center" style="margin-left: 10px;">原因<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
		</grid>

		<scroller :on-refresh="refresh" :on-infinite="infinite" :noDataText="noDataText" ref="poStudentList">
			<group id="commonScroller" class="commonScrollerMyCustomer">
				<grid class="tableListCell" v-for="item in items" :show-vertical-dividers="false">
					<grid-item @click.native="jumpTo(item.id)">
						<span class="grid-center-name">{{item.name.substring(0,3)}}</span>
					</grid-item>
					<grid-item>
						<span v-if="item.employee == null" class="grid-center">未填</span>
						<span v-else class="grid-center">{{item.employee}}</span>
					</grid-item>
					<grid-item>
						<span v-if="item.channel_tag == null" class="grid-center">未填</span>
						<span v-else class="grid-center">{{item.channel_tag}}</span>
					</grid-item>
					<grid-item>
						<span class="grid-center">{{formatTime(item.update_time)}}</span>
					</grid-item>
					<grid-item>
						<span v-if="item.obsolete_tag == null" class="grid-center">无</span>
						<span v-else class="grid-center">{{item.obsolete_tag}}</span>
					</grid-item>
				</grid>
			</group>
		</scroller>
	</div>
</template>

<script>
	import Vue from 'vue'
	import DateUtil from '../../../utils/date'
	import NetWorking from '../../../utils/networking'
	import { Group, Cell, ConfirmPlugin, Tab, TabItem, FormPreview, Grid, GridItem, TransferDom, Popup, Flexbox, FlexboxItem, XButton, XTextarea, Checker, CheckerItem} from 'vux'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	Vue.use(ConfirmPlugin)

	const SIZE = 20

	export default {
		name: "scrollerObsoleteCustomer",
		components: {
			Group,
			Cell,
			Tab,
			TabItem,
			FormPreview,
			Grid,
			GridItem,
			TransferDom,
			Popup,
			Flexbox,
			FlexboxItem,
			XButton,
			XTextarea,
			Checker,
			CheckerItem
		},
		directives: {
			TransferDom
		},
		props: ['curURL', 'jumpToObjectDetails','username','status'],
		data() {
			return {
				isWechat: false,
				id: '',
				detail: '',
				hint: '通话详细内容',
				showPopup: false,
				showIfConnected: false,
				action: {name: '再沟通', value: 8},
				actionItems: [{name: '再沟通', value: 8}, {name: '转为准客户', value: 0}, {name: '丢弃', value: '3'}],
				noDataText: '',
				offset: 0,
				limit: SIZE,
				noMoreData: false,
				items: [],
				list: [],
				orderBy: 'update_time',
				sequence: 'desc'
			}
		},
		created: function () {

			if(sessionStorage.orderByObsolete != null){
				this.orderBy = sessionStorage.orderByObsolete
			}

			if(sessionStorage.sequenceObsolete != null){
				this.sequence = sessionStorage.sequenceObsolete
			}
		},
		watch: {
			curURL: function () {
				this.resetData()
			},
			orderBy: function () {
				this.resetData()
			},
			sequence: function () {
				this.resetData()
			},
			status: function () {
				this.resetData()
			}
		},
		methods:{
			formatTime: function (time) {
				return DateUtil.getYYMMDD(new Date(time))
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: "customerDetails", params: { id: id, index: 1}})
			},
			triggerrefresh()
			{
				this.noDataText = ''
				this.offset = 0
				this.limit = SIZE
				this.noMoreData = false
				this.items = []
				this.$refs.scrollerTrace.finishPullToRefresh(false)
				this.$refs.scrollerTrace.finishInfinite(false)
				this.infinite(done)
			},
			orderByFunc: function (value) {
				this.orderBy = value
				if(this.sequence == 'asc'){
					this.sequence = 'desc'
				}else{
					this.sequence = 'asc'
				}
				sessionStorage.orderByObsolete = this.orderBy
				sessionStorage.sequenceObsolete = this.sequence
			},
			resetData() {
				this.noDataText = ''
				this.offset = 0
				this.limit = SIZE
				this.noMoreData = false
				this.items = []
				this.$refs.poStudentList.finishPullToRefresh(false)
				this.$refs.poStudentList.finishInfinite(false)
			},
			refresh (done) {
				this.$refs.poStudentList.finishPullToRefresh(true)
				return
			},
			infinite (done) {
				if(this.noMoreData){
					this.noDataText = '没有更多记录了——总' + this.items.length + '条'
					this.$refs.poStudentList.finishInfinite(true)
					return
				}else{
					let _this = this
					_this.offset += 1
					this.isRunning = true
					NetWorking.doGet(
						this.curURL,
						null ,
						{
							params:{
								offset: _this.offset,
								limit: _this.limit,
								orderBy: _this.orderBy,
								sequence: _this.sequence,
								username: _this.username,
								status: _this.status
							}
						}
					).then(
						response => {
							let res = response.data
							if (res.error_code == 0) {
								if(res.page_info.list.length >= 0){
									_this.items.push.apply(_this.items, res.page_info.list)
									_this.bottom += res.page_info.list.length
									//set noMoreData flag to true if current size < limit
									if(res.page_info.list.length < _this.limit){
										_this.noMoreData = true
										_this.$refs.poStudentList.finishInfinite(true);
									}
								}
							} else {
								alert(res.error_message)
							}
							done()
						}
					)
				}
			}
		}
	}
</script>

<style>
	.commonScrollerMyCustomer{
		margin-top: 122px;
	}

	.tableListCell {
		font-size: 12px;
	}

	.tableListCell > .weui-grid {
		text-decoration: none;
	}

	.grid-center {
		display: block;
		text-align: center;
		color: #666;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.poStudentList {
		margin-top: 76px;
	}

	.poStudentList > .weui-cells:before {
		border-top: none;
	}

	.formCard {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
		border-radius: 25px;
		box-shadow: 5px 5px 5px #888888;
	}

	.formCard > .weui-form-preview__hd .weui-form-preview__value{
		font-size: .9em !important;
		color: #999999
	}

	.tag {
		text-align: right;
		background: red;
		width: fit-content;
		color: white;
		padding-left: 5px;
		border-radius: 5px;
		padding-right: 5px;
		font-size: 13px;
	}

	.itemTime {
		display: block;
		-webkit-margin-before: 1em;
		-webkit-margin-after: 1em;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		line-height: 1.41176471;
		font-size: 13px;
	}

	.checkDefault {
		border: 1px solid #ececec;
		padding: 5px 5px;
		background-color: white;
		margin-right: 10px;
		font-size: 13px;
		margin-bottom: 10px;
	}
	
	.checkDefaultSelected {
		background: #ffffff url(../../../assets/img/icon_check.png) no-repeat right bottom;
		border-color: #ff4a00;
	}
</style>